<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>后台管理</title>

    <!-- Bootstrap 4.0-->
    <link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">

    <!-- Bootstrap extend-->
    <link rel="stylesheet" href="../../css/bootstrap-extend.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../../css/master_style.css">

    <!-- Fab Admin skins -->
    <link rel="stylesheet" href="../../css/skins/_all-skins.css">

    <script src="../../js/jquery.min.js"></script>

    <script src="../../js/bootstrap.min.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body class="hold-transition skin-blue-light sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

    <!-- 顶部导航栏 -->
    <span id="mytop"></span>
    <span id="myleft"></span>
    <script>
        $(function(){
            /*公共部分
             * 导航栏
             */
            $("#mytop").load("header.html");
            $("#myleft").load("left.html");
        });
        const API = "http://localhost:8080";
    </script>

    <!-- =============================================== -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                类别
            </h1>
        </section>

        <!-- Main content -->
        <!-- Main content -->
        <div class="box box-default">
            <!-- /.box-header -->
            <div class="box-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-fill" role="tablist">
                    <!-- 内部三个菜单类导航栏 -->
                    <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#list" role="tab"><span class="hidden-sm-up"><i class="ion-person"></i></span> <span class="hidden-xs-down">类别列表</span></a> </li>
                    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#add" role="tab"><span class="hidden-sm-up"><i class="ion-home"></i></span> <span class="hidden-xs-down">添加类别</span></a> </li>
                    <!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages11" role="tab"><span class="hidden-sm-up"><i class="ion-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li> -->
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabcontent-border">
                    <!-- 第一个panel开始 -->
                    <div class="tab-pane" id="add" role="tabpanel">
                        <section class="content">
                            <!-- 添加类别 -->
                            <div class="row">
                                <div class="col-12 col-lg-9">
                                    <div class="box box-solid bg-primary">
                                        <div class="box-header">
                                            <h4 class="box-title">
                                                <strong>添加类别</strong>
                                            </h4>
                                        </div>

                                        <div class="box-body">

                                            <!-- ajax 级联菜单-->

                                            <form action="" method="">
                                                <div class="form-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="text-info">类别名称</label>
                                                                <input type="text" class="form-control" name="name" id="name" required>
                                                            </div>
                                                        </div>
                                                        <!--/span-->
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                            </div>
                                                        </div>
                                                        <!--/span-->
                                                    </div>
                                                    <!--/row-->
                                                    <!--/row-->
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="text-info">类别等级</label>
                                                                <select class="form-control" id="grade" id="grade">
                                                                    <option value="-1">----请选择----</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <!--/span-->

                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="text-info">父级名称</label>
                                                                <select class="form-control" id="pid" name="pid">
                                                                    <option value="-1">----请选择----</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <!--/span-->
                                                        <div class="col-md-6">
                                                            <div class="form-group">

                                                            </div>
                                                        </div>
                                                        <!--/span-->
                                                    </div>
                                                    <!--/row-->
                                                    <div class="row">

                                                        <!--/span-->
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <label class="text-info">描述</label>
                                                                <textarea class="form-control" rows="4" id="descr" required></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--/row-->
                                                    <div class="row">

                                                    </div>
                                                </div>
                                                <div class="form-actions mt-10">
                                                    <button type="button" class="btn btn-success" id="categoryInsert"> <i class="fa fa-check"></i> 保存</button>
                                                    <button type="reset" class="btn btn-danger"> <i class="fa fa-close"></i> 重置</button>
                                                </div>
                                            </form>
                                            <script type="text/javascript">
                                                $(document).ready(function () {
                                                    $.ajax({
                                                        url: API + "/category/grades",
                                                        dataType: "json",
                                                        type: "get",
                                                        success: function (jsonGrades) {
                                                            $("#grade").html("<option value='-1'>----请选择----</option>");
                                                            for (let i = 0; i < jsonGrades.length; i++) {
                                                                $("<option value='" + jsonGrades[i] + "'>" + jsonGrades[i]+ "</option>").appendTo("#grade")
                                                            }
                                                        }
                                                    });
                                                    $("#grade").change(function () {

                                                        /*计算父级等级*/
                                                        let pGrade = parseInt($("#grade").val()) - 1;
                                                        $.ajax({
                                                            url: API + "/category/grades/" + pGrade,
                                                            dataType: "json",
                                                            type: "get",
                                                            success: function (jsonPCategory) {
                                                                $("#pid").html("<option value='-1'>----请选择----</option>");
                                                                for (let i = 0; i < jsonPCategory.length; i++) {
                                                                    $("<option value='" + jsonPCategory[i].id + "'>" + jsonPCategory[i].name
                                                                        + "</option>") .appendTo("#pid")
                                                                }
                                                            }
                                                        });
                                                    });
                                                });
                                                $("#categoryInsert").click(function () {
                                                    /*拿到父类id*/
                                                    let pid = $("#pid").val();
                                                    let name = $("#name").val();
                                                    let descr = $("#descr").val();
                                                    let grade = $("#grade").val();
                                                    let json = {
                                                        name: name,
                                                        pid: pid,
                                                        descr: descr,
                                                        grade: grade,
                                                    };
                                                    let str = JSON.stringify(json);
                                                    console.log("pid"+pid, "\nname"+name, "\ndescr"+descr, "\ngrade"+grade);

                                                    $.ajax({
                                                        url: API + "/category",
                                                        type: "post",
                                                        dataType: "text",
                                                        contentType: "application/json",
                                                        data: str,
                                                        success: function (info) {
                                                            alert(info)

                                                        }
                                                    })
                                                })
                                            </script>
                                        </div>
                                    </div>
                                </div>



                            </div>

                        </section>
                    </div>
                    <!-- 第二个panel开始 -->
                    <div class="tab-pane pad active" id="list" role="tabpanel">
                        每页展示&nbsp;&nbsp; <label>
                        <select id="productorder_length" name="productorder_length" aria-controls="productorder" class="form-control form-control-sm">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </label>&nbsp;&nbsp;条&nbsp;&nbsp;&nbsp;&nbsp;
                        共&nbsp;&nbsp;&nbsp;<label id="total"></label>&nbsp;&nbsp;&nbsp;条


                        <!-- 查看所有类别，进行分页处理 -->
                        <div class="table-responsive">
                            <table id="productorder" class="table table-hover no-wrap product-order" data-page-size="12">
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>name</th>
                                    <th>descr</th>
                                    <th>pid</th>
                                    <th>grade</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- 使用ajax向列表中添加数据 -->
                                <script>
                                    /*通用方法*/
                                    /*传入pageSize和pn，写入数据*/
                                    function loadData(pn, pageSize){
                                        console.log(API);
                                        $.ajax({
                                            url: API + "/category",
                                            dataType: "json",
                                            type: "get",
                                            data: {
                                                pageSize: pageSize,
                                                pn: pn
                                            },
                                            success: function (pageInfo) {
                                                console.log(pageInfo);
                                                list = pageInfo['list'];
                                                let total;
                                                let curPage;


                                                /*全局变量*/
                                                pages = pageInfo['pages'];
                                                prePage = pageInfo['prePage'];
                                                nextPage = pageInfo['nextPage'];
                                                total = pageInfo['total'];
                                                curPage = pageInfo['pageNum'];
                                                for (let i = 0; i < list.length; i++){
                                                    let id = list[i]['id'];
                                                    let name = list[i]['name'];
                                                    let descr = list[i]['descr'];
                                                    let pid = list[i]['pid'];
                                                    let grade = list[i]['grade'];
                                                    $(
                                                        "<tr>"+
                                                        "<td>"+id+"</td>"+
                                                        "<td>"+name+"</td>"+
                                                        "<td>"+descr+"</td>"+
                                                        "<td>"+pid+"</td>"+
                                                        "<td>"+grade+"</td>"+
                                                        "<td><button type='button' data-id='"+id+"' data-name='"+name+"' data-descr='"+descr+"' data-pid='"+pid+"' data-grade='"+grade+"' class='btn btn-rounded btn-info btn-xs'  data-toggle='modal' data-target='#myModal'>"+
                                                        "编辑</button>"+
                                                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-rounded btn-danger btn-xs' onclick='del("+id+")'>删除</button></td></tr>"
                                                    ).appendTo("tbody");
                                                }
                                                /*更新页面当前页，总页数，总条数*/
                                                if(curPage < 1){
                                                    curPage = 1
                                                }
                                                if(curPage === pages){
                                                    nextPage = pages
                                                }
                                                $("#curPage").text(curPage);
                                                $("#pages").text(pages);
                                                $("#total").text(total);

                                                $("#target").val(1);
                                            }
                                        });
                                    }



                                    $(document).ready(function() {
                                        /* 每页展示多少条数据 */
                                        let pageSize = $("#productorder_length").val();
                                        /* 当前页码 */
                                        let pn = $("#curPage").text();
                                        loadData(pn, pageSize);

                                        /* 根据每页展示数据量的选择，展示数据 */
                                        $("#productorder_length").change(function(){
                                            /* 根据当前页面展示条数，重新计算总页数 */
                                            // countPageNo();
                                            $("tbody").html("");
                                            /* 每页展示多少条数据 */
                                            let pageSize = $("#productorder_length").val();
                                            /* 当前页码 */
                                            let pn = $("#curPage").text();
                                            loadData(pn, pageSize)
                                        });

                                    });
                                    /* 首页 */
                                    function firstPage(){
                                        let pageSize = $("#productorder_length").val();
                                        $("tbody").html("");
                                        loadData(1, pageSize);
                                    }
                                    /* 尾页 传最后一页给下一页逻辑 */
                                    function lastPage(){
                                        /* 每页展示多少条数据 */
                                        let pageSize = $("#productorder_length").val();
                                        $("tbody").html("");
                                        loadData(pages, pageSize);
                                    }

                                    /* 下一页 */
                                    function pageDown(){

                                        /* 每页展示多少条数据 */
                                        let pageSize = $("#productorder_length").val();
                                        $("tbody").html("");
                                        loadData(nextPage, pageSize);

                                    }
                                    /* 上一页 */
                                    function pageUp(){
                                        /* 每页展示多少条数据 */
                                        let pageSize = $("#productorder_length").val();
                                        $("tbody").html("");
                                        $("#curPage").text(prePage);
                                        loadData(prePage, pageSize);

                                    }

                                    function del(id) {
                                        if (confirm("你确定删除吗")) {
                                            /* 每页展示多少条数据 */
                                            let pageSize = $("#productorder_length").val();
                                            /* 当前页码 */
                                            let pn = $("#curPage").text();
                                            $.ajax({
                                                url: API + "/category" + "/" + id,
                                                contentType: "application/json",
                                                dataType: "text",
                                                type: "delete",
                                                success: function (info) {
                                                    alert(info);
                                                    $("tbody").html("");
                                                    loadData(pn, pageSize)
                                                }
                                            });
                                        }
                                    }

                                </script>
                                </tbody>
                            </table>


                            <!-- 翻页 -->
                            <div class="row">
                                <div class="col-sm-12 col-md-4"></div>
                                <div class="col-sm-12 col-md-8">
                                    <div class="dataTables_paginate paging_simple_numbers" id="productorder_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button page-item previous">
                                                <a href="javascript:firstPage()" aria-controls="productorder" data-dt-idx="0" tabindex="0" class="page-link" id="first">首页</a>
                                            </li>
                                            <li class="paginate_button page-item previous">
                                                <a href="javascript:pageUp()" aria-controls="productorder" data-dt-idx="0" tabindex="0" class="page-link" id="prePage">上一页</a>
                                            </li>
                                            <li class="paginate_button page-item active">
                                                第<a  href="#" aria-controls="productorder" data-dt-idx="1" tabindex="0" class="page-link" id="curPage">1</a>页
                                            </li>

                                            <li class="paginate_button page-item next" id="productorder_next">
                                                <a href="javascript:pageDown()" aria-controls="productorder" data-dt-idx="3" tabindex="0" class="page-link" id="nextPage">下一页</a>
                                            </li>
                                            <li class="paginate_button page-item previous" id="productorder_previous">
                                                <a href="javascript:lastPage()" aria-controls="productorder" data-dt-idx="0" tabindex="0" class="page-link">尾页</a>
                                            </li>
                                            <li>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到&nbsp;&nbsp;<input id="target" style="width: 60px" type="number" value="1" min="1" max="999"/>&nbsp;&nbsp;页
                                            </li>
                                            &nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-rounded btn-success btn-xs" id="goto">前往</button>
                                            <script>
                                                $("#goto").click(function () {
                                                    let target = $("#target").val();
                                                    if(target > pages){
                                                        target = pages;
                                                    }
                                                    $("tbody").html("");
                                                    let pageSize = $("#productorder_length").val();
                                                    loadData(target, pageSize);
                                                })
                                            </script>

                                            <li>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;&nbsp;<label id="pages"></label>&nbsp;&nbsp;页
                                            </li>
                                            <li>

                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                    <!-- 第二个panel结束 -->
                </div>
            </div>
            <!-- /.box-body -->
        </div>

    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <div class="box box-solid bg-primary">
                        <div class="box-header">
                            <h4 class="box-title">
                                修改类别
                            </h4>
                        </div>

                        <div class="box-body">

                            <form action="">
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="text-info">id
                                                    <span class="badge badge-danger">
		                                    			不可修改
		                                    		</span>
                                                </label>
                                                <span id="modal_id" class="form-control"></span>
                                                <input id="id" type="hidden" name="modal_id"/>
                                            </div>
                                        </div>
                                        <!--/span-->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="text-info">类别名称
                                                    <span class="badge badge-default">
		                                    			可修改
		                                    		</span>
                                                </label>
                                                <input id="modal_name" name="modal_name" type="text" class="form-control" required/>
                                            </div>
                                        </div>
                                        <!--/span-->
                                    </div>
                                    <!--/row-->
                                    <!--/row-->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="text-info">类别等级
                                                    <span class="badge badge-danger">
		                                    			不可修改
		                                    		</span>
                                                </label>
                                                <span id="modal_grade" class="form-control"></span>
                                            </div>
                                        </div>
                                        <!--/span-->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="text-info">父类id
                                                    <span class="badge badge-danger">
		                                    			不可修改
		                                    		</span>
                                                </label>
                                                <span id="modal_pid" class="form-control"></span>
                                            </div>
                                        </div>

                                        <!--/span-->
                                    </div>

                                    <div class="row">

                                        <!--/span-->
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="text-info">描述
                                                    <span class="badge badge-default">
		                                    			可修改
		                                    		</span>
                                                </label>
                                                <textarea id="modal_descr" name="modal_descr" class="form-control" rows="4" required></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <!--/row-->
                                    <div class="row">

                                    </div>
                                </div>
                                <div class="form-actions mt-10">
                                    <button type="button" class="btn btn-success" id="categoryUpdate" data-dismiss="modal"> <i class="fa fa-check"></i> 保存</button>
                                    <button class="btn btn-danger"  data-dismiss="modal"> <i class="fa fa-close"></i> 取消</button>
                                </div>
                            </form>
                            <script>
                                /*更新分类的put请求*/
                                $("#categoryUpdate").click(function () {
                                    jsonobj = {
                                        id: $("#id").val(),
                                        name: $("#modal_name").val(),
                                        grade: $("#modal_grade").text(),
                                        descr: $("#modal_descr").val(),
                                        pid: $("#modal_pid").text(),
                                    };
                                    /* 每页展示多少条数据 */
                                    let pageSize = $("#productorder_length").val();
                                    /* 当前页码 */
                                    let pn = $("#curPage").text();
                                    let str = JSON.stringify(jsonobj);
                                    $.ajax({
                                        url: API + "/category",
                                        dataType: "text",
                                        type: "put",
                                        contentType: "application/json",
                                        data: str,
                                        success: function (info) {
                                            alert(info);
                                            $("tbody").html("");
                                            loadData(pn, pageSize);

                                        }
                                    });

                                })
                            </script>


                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script type="text/javascript">
        /* 将页面中的数据传给模态框 */
        $('#myModal').on('shown.bs.modal', function (event) {
            var btn = $(event.relatedTarget); //触发事件的按钮
            var modal = $(this);  //当前模态框
            var id = btn.data('id');
            var name = btn.data('name');
            var descr = btn.data('descr');
            var pid = btn.data('pid');
            var leaf = btn.data('leaf');
            var grade = btn.data('grade');
            $('#modal_id').text(id);
            $('#modal_name').val(name);
            $('#modal_descr').text(descr);
            $('#modal_pid').text(pid);
            $('#modal_leaf').text(leaf);
            $('#modal_grade').text(grade);
            /* 在input隐藏域中传递id */
            $('#id').val(id)
        });
    </script>



    <footer class="main-footer">
        <div class="pull-right d-none d-sm-inline-block">
            <ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end">
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)">FAQ</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Purchase Now</a>
                </li>
            </ul>
        </div>
        &copy; 2018 <a href="https://www.multipurposethemes.com/">Multi-Purpose Themes</a>. All Rights Reserved.
    </footer>
    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-light">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li class="nav-item"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li class="nav-item"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-cog fa-spin"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-danger"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Admin Birthday</h4>

                                <p>Will be July 24th</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-warning"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Jhone Updated His Profile</h4>

                                <p>New Email : jhone_doe@demo.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-info"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Disha Joined Mailing List</h4>

                                <p>disha@demo.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-success"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Code Change</h4>

                                <p>Execution time 15 Days</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Web Design
                                <span class="label label-danger pull-right">40%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Update Data
                                <span class="label label-success pull-right">75%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 75%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Order Process
                                <span class="label label-warning pull-right">89%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 89%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Development
                                <span class="label label-primary pull-right">72%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 72%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <input type="checkbox" id="report_panel" class="chk-col-grey" >
                        <label for="report_panel" class="control-sidebar-subheading ">Report panel usage</label>

                        <p>
                            general settings information
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <input type="checkbox" id="allow_mail" class="chk-col-grey" >
                        <label for="allow_mail" class="control-sidebar-subheading ">Mail redirect</label>

                        <p>
                            Other sets of options are available
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <input type="checkbox" id="expose_author" class="chk-col-grey" >
                        <label for="expose_author" class="control-sidebar-subheading ">Expose author name</label>

                        <p>
                            Allow the user to show his name in blog posts
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">Chat Settings</h3>

                    <div class="form-group">
                        <input type="checkbox" id="show_me_online" class="chk-col-grey" >
                        <label for="show_me_online" class="control-sidebar-subheading ">Show me as online</label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <input type="checkbox" id="off_notifications" class="chk-col-grey" >
                        <label for="off_notifications" class="control-sidebar-subheading ">Turn off notifications</label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            <a href="javascript:void(0)" class="text-red margin-r-5"><i class="fa fa-trash-o"></i></a>
                            Delete chat history
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <!-- /.control-sidebar -->

    <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->


<!-- jQuery 3 -->
<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>

<!-- popper -->
<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>

<!-- Bootstrap 4.0-->
<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- SlimScroll -->
<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>

<!-- FastClick -->
<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>

<!-- Fab Admin App -->
<script src="../../js/template.js"></script>

<!-- Fab Admin for demo purposes -->
<script src="../../js/demo.js"></script>


</body>
</html>
